<script setup>
  import { reactive,ref } from 'vue';
  let table = ref(false);
  let keyword = ref('');
  const stu = reactive({
    id:0,
    name:'',
    sex:'',
    year:''
  });
  const stus = reactive([
    {
      id:1,
      name:'张三',
      sex:'男',
      year:'18'
    },
    {
      id:2,
      name:'李四',
      sex:'男',
      year:'19'
    },
    {
      id:3,
      name:'王二麻子',
      sex:'男',
      year:'20'
    },
    {
      id:4,
      name:'翠花',
      sex:'女',
      year:'18'
    },
    {
      id:5,
      name:'春禅',
      sex:'女',
      year:'25'
    }
  ]);
  // 新增
  function btnAdd(){
      table.value = true;
      stu.id = 0;
      stu.name = '';
      stu.sex = '';
      stu.year = '';
  }
  // 编辑
  function btnEdit(id){
      table.value = true;
      let tmpstu = stus.filter((item) => {
        return item.id === id;
      })[0];
      stu.id = tmpstu.id;
      stu.name = tmpstu.name;
      stu.sex = tmpstu.sex;
      stu.year = tmpstu.year;
  }
  // 保存
  function btnSave(id){
    table.value = false;
    if(id>0){
      let tmpstu=stus.filter((item)=>{
        return item.id==id;
      })[0];
    tmpstu.name = stu.name;
    tmpstu.sex = stu.sex;
    tmpstu.year = stu.year;
    }else{
      const newstu = {...stu};
      newstu.id = stus.length + 1;
      stus.push(newstu);
    }
  }
  function btnCel(){
      table.value = false;
  }
  function btnDel(id){
    if(confirm('是否删除？')){
      let  index = stus.findIndex(item => item.id === id); 
      if (index !== -1) { 
        stus.splice(index, 1); 
      }
    }
  }
  function btnFind(){
    keyword.value.trim();
    if (keyword === '') {
       stus.forEach(item => {
         item.hide = false;
       });
     } else {
       stus.forEach(item => {
         if (item.name.search(keyword.value)!=-1 || item.sex.search(keyword.value)!=-1 || item.year.search(keyword.value)!=-1) {
          item.hide = false;
         } else {
           item.hide = true;
         }
       });
      }
  }
</script>

<template>
   <div>
        <input type="text" placeholder="请输入需要查询的信息" v-model="keyword">
        <input type="button" value="查询" @click="btnFind()">
        <input type="button" value="新增" @click="btnAdd()">
    </div>
    <div>
    <table class="tb">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="item in stus" :key="item.id" v-show="!item.hide">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.year}}</td>
                    <td>
                        <input type="button" value="编辑" class="edit" @click="btnEdit(item.id)">
                        <input type="button" value="删除" class="delete" @click="btnDel(item.id)">
                    </td>
                </tr>
    </table>
  </div>
    <div v-show="table">
            <table>
                <tr>
                    <td>姓名</td>
                    <td>
                        <input type="text"  v-model="stu.name">
                    </td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="text"  v-model="stu.sex">
                    </td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td>
                        <input type="text"  v-model="stu.year">
                    </td>
                </tr>
                <tr>
                    <td>操作:</td>
                    <td>
                        <input type="button" value="保存" @click="btnSave(stu.id)">
                        <input type="button" value="取消" @click="btnCel()">
                    </td>
                </tr>
            </table>
        </div>
</template>

<style scoped>
  .tb,tr,th,td{
  border: 1px solid #000;
  border-spacing: 0px;
}
</style>
